<template>
  <!--学生申报课题-->
  <div class="edu-page-warp stu-declare">
    <!--申报选题弹框-->
    <DeclareTopicDialog ref="declareTopicDialog" v-if="dialogVisible" :declareDialogVisible="dialogVisible" :declareTopicForm="declareTopicForm" @declare-submit="declareSubmit" @declare-save="declareSave" @declare-close="declareClose"></DeclareTopicDialog>
    <el-card shadow="never">
      <el-row>
        <el-col>
          <div class="stu-declare-title">{{`${$t('graduationDesign.welcome')}${studentInfo.collegeI18n || ''}${studentInfo.studentName || ''}${studentInfo.studentId === 'admin' ? '': $t('graduationDesign.classmate')}。`}}</div>
        </el-col>
      </el-row>
      <div class="edu-page-title">{{$t('graduationDesign.mySubject')}}</div>
      <div class="edu-opertion-bar">
        <div class="float-right">
          <el-button type="primary" @click="onDeclare">{{$t('graduationDesign.declareSubject')}}</el-button>
        </div>
      </div>
      <edu-table ref="stuDeclareTable" :url="getList" :selection="false">
        <edu-table-column :label="$t('graduationDesign.subjectName')" prop="projectName" min-width="90"></edu-table-column>
        <edu-table-column :label="$t('graduationDesign.mentor')" prop="teacherName" min-width="100"></edu-table-column>
        <edu-table-column :label="$t('graduationDesign.subjectSource')" prop="projectSource" min-width="100"></edu-table-column>
        <edu-table-column :label="$t('graduationDesign.subjectNature')" prop="projectSource" min-width="100"></edu-table-column>
        <edu-table-column :label="$t('graduationDesign.subjectType')" prop="projectType" min-width="100"></edu-table-column>
        <edu-table-column :label="$t('graduationDesign.socialPractice')" prop="practiceSocial" min-width="140"></edu-table-column>
        <edu-table-column :label="$t('graduationDesign.submitTime')" prop="submitTime" min-width="100"></edu-table-column>
        <edu-table-column :label="$t('graduationDesign.reviewSubjectStatus')" prop="status" min-width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 'WaitCommit'" type="info">{{$t('graduationDesign.draft')}}</el-tag>
            <el-tag v-else-if="scope.row.status === 'Process'" type="info">{{$t('graduationDesign.pendingReview')}}</el-tag>
            <el-tag v-else-if="scope.row.status === 'Reject'" type="danger">{{$t('graduationDesign.rejected')}}</el-tag>
            <el-tag v-else-if="scope.row.status === 'End'" type="success">{{$t('graduationDesign.passed')}}</el-tag>
          </template>
        </edu-table-column>
        <edu-table-column :label="$t('graduationDesign.confirmTopicStatus')" prop="choose" min-width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.choose" type="success">{{$t('graduationDesign.confirmed')}}</el-tag>
            <el-tag v-else type="info">{{$t('graduationDesign.unconfirmed')}}</el-tag>
          </template>
        </edu-table-column>
        <edu-table-column :label="$t('graduationDesign.operation')" min-width="130">
          <template slot-scope="scope">
            <el-button type="text" @click="onEdit(scope.row)" v-if="scope.row.status === 'WaitCommit' || scope.row.status === 'Reject'">{{$t('graduationDesign.edit')}}</el-button>
            <el-button type="text" @click="onView(scope.row)">{{$t('graduationDesign.view')}}</el-button>
            <el-button type="text" @click="onConfirm(scope.row)" v-if="scope.row.status === 'End' && !scope.row.choose">{{$t('graduationDesign.confirmTopic')}}</el-button>
          </template>
        </edu-table-column>
      </edu-table>
    </el-card>
  </div>
</template>
<script>
import API from "common/src/api/underGraduationDesign/stuDeclareSubject";
import UTILS from 'common/src/utils/utils';

export default {
  name: 'stuDeclareSubject',
  data() {
    return {
      getList: '/api/designservice/applicationStudent/list',
      api: API,
      queryForm: {},
      dialogVisible: false,
      declareTopicForm: {},
      //学生信息
      studentInfo: {
        grade: "",
        collegeI18n: "",
        studentId: "",
        studentName: ""
      },
    };
  },
  mounted() {
    this.getStudentInfo();
    this.searchList();
  },
  methods: {
    // 查学生信息
    getStudentInfo() {
      this.api.getStuInfo({}).then(res => {
        this.studentInfo = res.data;
      }).catch();
    },
    searchList() {
      this.$refs.stuDeclareTable.search(this.queryForm);
    },
    // 申报课题
    onDeclare(row) {
      this.dialogVisible = true;
      this.declareTopicForm = {
        grade: this.studentInfo.grade,
        actionType: "ADD"
      };
    },
    onEdit(row) {
      this.dialogVisible = true;
      this.declareTopicForm = { ...row };
      this.declareTopicForm.grade = this.studentInfo.grade;
      this.declareTopicForm.actionType = "EDIT";
    },
    onView(row) {
      this.dialogVisible = true;
      this.declareTopicForm = { ...row };
      this.declareTopicForm.actionType = "VIEW";
      this.declareTopicForm.grade = this.studentInfo.grade;
    },
    // 确认选题
    onConfirm(row) {
      const contentTips = `<span style="color: #409EFF;">"${row.projectName}"</span>`;
      this.$eduConfirm(UTILS.i18nReplace(this.$t('graduationDesign.confirmTopicTips'), { contentTips: contentTips }), this.$t('graduationDesign.prompt'), {
        dangerouslyUseHTMLString: true
      }).then(() => {
        this.api.confirm(row.id).then(res => {
          this.$message.success(this.$t('graduationDesign.confirmSuccess'));
          this.searchList();
        }).catch();
      }).catch(() => { });
    },
    declareClose() {
      this.dialogVisible = false;
      this.searchList();
    },
    // 保存
    declareSave(data) {
      this.$refs.declareTopicDialog.$refs["declareTopicForm"].validate(valid => {
        if (valid) {
          let promise = null;
          if (data.actionType === "EDIT") {
            promise = this.api.update(data);
          } else {
            promise = this.api.save(data);
          }
          promise.then(res => {
            this.$message.success(this.$t('graduationDesign.saveSuccess'));
            this.dialogVisible = false;
            this.searchList();
          }).catch();
        } else {
          return false;
        }
      });
    },
    // 提交
    declareSubmit(data) {
      this.$refs.declareTopicDialog.$refs["declareTopicForm"].validate(valid => {
        if (valid) {
          this.api.submit(data).then(res => {
            this.$message.success(this.$t('graduationDesign.submitSuccess'));
            this.dialogVisible = false;
            this.searchList();
          }).catch();
        } else {
          return false;
        }
      });
    },
  },
  components: {
    DeclareTopicDialog: () => import('./components/declareTopicDialog')
  }
}
</script>
<style lang="scss" scoped>
.stu-declare {
    .stu-declare-title {
        line-height: 50px;
        text-align: center;
        font-size: 20px;
        border-bottom: 1px solid #dcdfe6;
        margin-bottom: 20px;
        padding: 10px 10px 30px;
    }
}
</style>
